<!--
 * @Date: 2023-05-19 17:41:39
 * @LastEditTime: 2023-09-21 16:04:50
 * 介绍:
-->
<route lang="json">
{
  "meta": {
    "title": "t('guan-yu-wo-men')"
  }
}
</route>
<script lang="ts" setup name="me-aboutus">
import { apiArticle, ApiArticle } from "@@/api/module/list";
import { useCrequestListRef } from "@@/components/common/CrequestList";
import { apiArticleDetails } from "@@/api/module/sys";
import { addCache } from "@@/hooks/routeCache";
addCache("me-aboutus");
const { t } = useI18n();
const tabs = computed(() => [
  {
    title: t("zui-xing-gong-gao"),
    api: apiArticle,
    params: { type: 1 },
  },
  {
    title: t("chang-jian-wen-ti"),
    api: apiArticle,
    params: { type: 2 },
  },
]);
const openCollapse = ref<string[]>(new Array(tabs.value.length));
interface Slot {
  index: number;
  item: Item;
}
interface Item extends ApiArticle.DataItem {
  details?: string;
  loading?: boolean;
  time?: string;
}
const CrequestListRef = useCrequestListRef();

async function getDetails(tab: (typeof tabs.value)[0], item: Item) {
  if (item.details || item.loading) return;
  item.loading = true;
  const res = await apiArticleDetails({
    type: tab.params.type,
    id: item.id,
  });
  item.loading = false;
  if (!res) return;
  item.details = res.content;
  item.time = res.updated_at;
}
</script>
<template>
  <CpageView>
    <Rtabs :swipeable="false">
      <VanTab :title="tab.title" v-for="(tab, index) in tabs" :key="index">
        <VanCollapse v-model="openCollapse[index]" accordion :border-mode="false">
          <CrequestList
            ref="CrequestListRef"
            :api="apiArticle"
            :params="tab.params"
            :pull-refresh="false"
          >
            <template #item="{ item }: Slot">
              <RcollapseItem
                @click="getDetails(tab, item)"
                :title="item.title"
                :key="item.id"
                :name="item.id"
              >
                <template #value>
                  <span class="C-T5 T-S-sm"> {{ item.introduction }}</span>
                </template>
                <van-loading v-if="item.loading" />
                <div v-else-if="item.details" class="article">
                  <div
                    class="article_details T-break"
                    v-html="item.details"
                  ></div>
                  <div class="T-A-R MT-sm C-T5">{{ item.time }}</div>
                </div>
                <div v-else>{{ $t("kong-kong-ru-ye") }}</div>
              </RcollapseItem>
            </template>
          </CrequestList>
        </VanCollapse>
      </VanTab>
    </Rtabs>
  </CpageView>
</template>
<style lang="scss" scoped>
.article {
  user-select: initial;
}
</style>
